
<template>
<div>
  <el-menu :default-active="defaultActiveMenuItem"
           :default-openeds="['bots','connector']"
           class="el-menu-vertical-demo"
           @select="changeMenuItem">
    <el-submenu index="bots">
      <template slot="title">
        <i class="el-icon-s-platform"></i>
        <span>{{ $t('custom.sys.bots') }}</span>
      </template>
      <el-menu-item-group>
        <!--<el-menu-item index="attendance">{{ $t('custom.sys.attendance') }}</el-menu-item>-->
        <!-- <el-menu-item index="next-ticket">{{ $t('custom.sys.nextTicket') }}</el-menu-item> -->
        <el-menu-item index="accounting">{{ $t('custom.sys.accounting') }}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="connector">
      <template slot="title">
        <i class="el-icon-paperclip"></i>
        <span>{{ $t('custom.sys.connector') }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="connector-config">{{ $t('custom.sys.config') }}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</div>
</template>

<script>
export default {
  props: {
    defaultActiveMenuItem: {
      type: String,
      default: 'attendance'
    }
  },
  data () {
    return {
    }
  },
  methods: {
    changeMenuItem (key, keyPath) {
      this.$emit('changeMenuActive', key)
    }
  }
}
</script>

<style scoped lang="scss">
@import "./system-setting.scss";
</style>
